refactor: replace prettier with oxfmt by ntatoud · Pull Request #713 · BearStudio/start-ui-web

ntatoud · 2026-03-05T08:32:48Z

Summary

Replace prettier and prettier-plugin-tailwindcss with oxfmt@0.36.0
Add .oxfmtrc.json with equivalent formatting config (singleQuote, semi, tabWidth, trailingComma, arrowParens)
Tailwind CSS class sorting is now built-in via sortTailwindcss (no separate plugin needed)
Update pretty and gen:icons scripts to use oxfmt
Update lefthook pre-commit hook to use oxfmt, add css/scss to glob
Replace esbenp.prettier-vscode with oxc.oxc-vscode in VS Code recommendations

Test plan

Run pnpm pretty and verify formatting works
Run pnpm gen:icons and verify icons are generated and formatted
Make a change and commit to verify the pre-commit hook runs oxfmt correctly

Summary by CodeRabbit

Chores
- Migrated formatting from Prettier to Oxfmt and added a new Oxfmt configuration.
- Removed old Prettier config and ignore files; updated format scripts and tooling accordingly.
- Updated recommended IDE extension to the Oxfmt extension.
- Pre-commit formatting broadened to include CSS/SCSS and now uses the new formatter.
- Improved TypeScript type annotations in input components for safer typing.

- Remove prettier and prettier-plugin-tailwindcss - Add oxfmt@0.36.0 with equivalent config in .oxfmtrc.json - Tailwind CSS class sorting now built-in via sortTailwindcss option - Update scripts, lefthook pre-commit hook, and VS Code extension recommendation

vercel · 2026-03-05T08:32:54Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
start-ui-web-v3	Ready	Preview, Comment	Mar 17, 2026 8:34am

coderabbitai · 2026-03-05T08:33:06Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

Walkthrough

Replaces Prettier with oxfmt across the repo: adds .oxfmtrc.json, removes Prettier config/ignore files, updates package scripts and devDependencies, updates lefthook and VS Code recommendations, and applies minor TypeScript annotation and comment edits. (50 words)

Changes

Cohort / File(s)	Summary
Formatter config `./.oxfmtrc.json`, `./.prettierrc.cjs`, `./.prettierignore`	Adds oxfmt configuration file; removes Prettier config and ignore file (Prettier settings and ignores deleted).
Tooling & scripts `./package.json`, `./lefthook.yml`, `./.vscode/extensions.json`	Replaces Prettier with oxfmt in scripts, devDependencies, pre-commit hook config, and VS Code recommended extension.
Minor code edits `src/components/icons/svgr.config.cjs`, `src/components/ui/input-group.tsx`	Dropped two comment lines in svgr config; tightened TypeScript `querySelector` generic annotations in input-group.
Compose YAML formatting `docker-compose.yml`	Reformatted maildev healthcheck `test` to expanded YAML array syntax (no behavior change).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

fix: add maildev service in e2e-tests.yml #695 — Related maildev healthcheck updates in docker-compose.yml.

Suggested reviewers

ivan-dalmet
yoannfleurydev

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'refactor: replace prettier with oxfmt' directly and clearly summarizes the main change in the PR: replacing the Prettier formatter with Oxfmt across all configuration files, dependencies, and scripts.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch ntatoud/replace-prettier-oxfmt

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure the reviews.tools.languagetool setting to enable/disable rules and categories. Refer to the LanguageTool Community to learn more.

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@package.json`:
- Line 22: The package.json currently defines a "format" npm script but the PR
description references updating the "pretty" script; verify whether you intended
to rename "pretty" to "format" or keep the original name. If the rename is
intentional, update the PR description to mention "format" (and any CI/docs
referencing "pretty") and ensure any tooling/README/CI that calls "pretty" is
updated to call "format"; if it was unintentional, change the script key back to
"pretty" so package.json matches the PR description.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 56b8ed83-f91b-4299-9c81-a57d4977d72d

📥 Commits

Reviewing files that changed from the base of the PR and between 821d8f7 and b4a6135.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (9)

.oxfmtrc.json
.prettierignore
.prettierrc.cjs
.vscode/extensions.json
docker-compose.yml
lefthook.yml
package.json
src/components/icons/svgr.config.cjs
src/components/ui/input-group.tsx

💤 Files with no reviewable changes (2)

.prettierrc.cjs
.prettierignore

coderabbitai · 2026-03-05T08:36:59Z

    "storybook": "storybook dev --no-open -p 6006",
    "storybook:build": "storybook build && mv ./storybook-static ./public/storybook",
-    "pretty": "prettier -w .",
+    "format": "oxfmt",


⚠️ Potential issue | 🟡 Minor

Minor inconsistency with PR description.

The PR description mentions updating the pretty script, but this shows a format script. This may be intentional (renaming the script), but please verify this is the intended script name change.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@package.json` at line 22, The package.json currently defines a "format" npm script but the PR description references updating the "pretty" script; verify whether you intended to rename "pretty" to "format" or keep the original name. If the rename is intentional, update the PR description to mention "format" (and any CI/docs referencing "pretty") and ensure any tooling/README/CI that calls "pretty" is updated to call "format"; if it was unintentional, change the script key back to "pretty" so package.json matches the PR description.

coderabbitai

🧹 Nitpick comments (1)

.oxfmtrc.json (1)
20-20: Don't exclude package.json unless that opt-out is intentional.

Line 20 prevents Oxfmt from formatting package.json at all, because files matched by ignorePatterns cannot be formatted even when explicitly targeted. Oxfmt also sorts package.json keys by default, so this skips one of the built-in behaviors you just switched to. (oxc.rs)
Suggested change
-    "package.json",
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In @.oxfmtrc.json at line 20, The ignorePatterns entry "package.json" is
preventing Oxfmt from formatting and sorting package.json; remove that entry
from the ignorePatterns array (or change it only if you truly intend to opt-out)
so Oxfmt can process package.json and apply its default key-sorting/formatting
behavior; look for the "ignorePatterns" key in .oxfmtrc.json and delete or
modify the "package.json" string.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In @.oxfmtrc.json:
- Line 20: The ignorePatterns entry "package.json" is preventing Oxfmt from
formatting and sorting package.json; remove that entry from the ignorePatterns
array (or change it only if you truly intend to opt-out) so Oxfmt can process
package.json and apply its default key-sorting/formatting behavior; look for the
"ignorePatterns" key in .oxfmtrc.json and delete or modify the "package.json"
string.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 74b0057a-86ee-454a-b0ce-734a3c9e3e66

📥 Commits

Reviewing files that changed from the base of the PR and between b4f740d and 8f83251.

📒 Files selected for processing (2)

.oxfmtrc.json
docker-compose.yml

gen:icons command is not working anymore because prettier is needed as a module

yoannfleurydev

ntatoud · 2026-03-17T08:28:09Z

@yoannfleurydev I can not reproduce your issue locally.
Same node version
Clean node_modules

Replace `prettier: false` with an explicit `plugins` list so that `@svgr/plugin-prettier` is never loaded, fixing the `Cannot find module 'prettier'` error when running gen:icons. Also scope the oxfmt generated ignorePattern to only the db generated folder instead of all generated directories. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

sonarqubecloud · 2026-03-17T08:33:18Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

yoannfleurydev · 2026-03-17T11:04:06Z

@yoannfleurydev I can not reproduce your issue locally. Same node version Clean node_modules

I've setup a new worktree, it is working as expected. pnpm is not doing great these days :(

vercel Bot deployed to Preview March 5, 2026 08:34 View deployment

coderabbitai Bot reviewed Mar 5, 2026

View reviewed changes

style: apply oxfmt formatting to svgr config

3550a78

vercel Bot deployed to Preview March 9, 2026 11:48 View deployment

ci: add formatter check job using oxfmt

eb234ca

vercel Bot deployed to Preview March 12, 2026 10:42 View deployment

ci: remove formatter check job

9872296

vercel Bot deployed to Preview March 12, 2026 11:35 View deployment

fix: restore docker-compose.yml and exclude yaml from oxfmt

b4f740d

vercel Bot deployed to Preview March 12, 2026 11:38 View deployment

style: let oxfmt format yaml files with double quotes

8f83251

vercel Bot deployed to Preview March 12, 2026 11:44 View deployment

coderabbitai Bot reviewed Mar 12, 2026

View reviewed changes

yoannfleurydev reviewed Mar 13, 2026

View reviewed changes

Comment thread src/components/icons/svgr.config.cjs

fix: remove package.json from ignorePatterns, add pnpm-lock.yaml

e0fe0fc

vercel Bot deployed to Preview March 13, 2026 16:23 View deployment

yoannfleurydev previously approved these changes Mar 16, 2026

View reviewed changes

yoannfleurydev requested changes Mar 16, 2026

View reviewed changes

vercel Bot deployed to Preview March 17, 2026 08:30 View deployment

ntatoud force-pushed the ntatoud/replace-prettier-oxfmt branch from bac7054 to 99dc941 Compare March 17, 2026 08:32

vercel Bot deployed to Preview March 17, 2026 08:34 View deployment

yoannfleurydev approved these changes Mar 17, 2026

View reviewed changes

yoannfleurydev merged commit b2278e6 into main Mar 19, 2026
15 checks passed

yoannfleurydev deleted the ntatoud/replace-prettier-oxfmt branch March 19, 2026 08:28

coderabbitai Bot mentioned this pull request Mar 19, 2026

refactor: migrate from ESLint to oxlint #716

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: replace prettier with oxfmt#713

refactor: replace prettier with oxfmt#713
yoannfleurydev merged 8 commits into
mainfrom
ntatoud/replace-prettier-oxfmt

ntatoud commented Mar 5, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Mar 5, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Mar 5, 2026 •

edited

Loading

Reviews paused

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Mar 5, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

yoannfleurydev left a comment

Uh oh!

ntatoud commented Mar 17, 2026 •

edited

Loading

Uh oh!

sonarqubecloud Bot commented Mar 17, 2026

Uh oh!

yoannfleurydev commented Mar 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ntatoud commented Mar 5, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

vercel Bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

yoannfleurydev left a comment

Choose a reason for hiding this comment

Uh oh!

ntatoud commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonarqubecloud Bot commented Mar 17, 2026

Quality Gate passed

Uh oh!

yoannfleurydev commented Mar 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ntatoud commented Mar 5, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Mar 5, 2026 •

edited

Loading

coderabbitai Bot commented Mar 5, 2026 •

edited

Loading

ntatoud commented Mar 17, 2026 •

edited

Loading